<template>
    <e-charts class="b-pie-box-risk" :options="options" />
</template>

<script>
import ECharts from "@/component/ECharts";

export default {
    name: "RiskPie",

    components: {
        ECharts,
    },

    props: {
        data: {
            type: Array,
            default() {
                return [];
            },
        },
    },

    data() {
        return {};
    },

    computed: {
        options() {
            return {
                color: ["#61F7F7", "#FFF42E", "#FF7F29", "#FF4A4A"],
                tooltip: {
                    show: true,
                    trigger: "item",
                    formatter: "{b}：{d}%",
                },
                legend: {
                    show: true,
                    orient: "vertical",
                    right: 16,
                    top: "center",
                    bottom: 20,
                    itemWidth: 20,
                    itemHeight: 12,
                    itemGap: 15,
                    data: this.data.map((item) => item.name),
                    formatter: (name) => {
                        const { value } = this.data.find((item) => item.name === name);
                        return "{a|" + name + "}{b|" + value + " 座}";
                    },
                    textStyle: {
                        rich: {
                            a: {
                                width: 39,
                            },
                            b: {
                                color: "#00F4FD",
                                fontSize: 14,
                            },
                        },
                        color: "rgba(255, 255, 255, 0.7)",
                    },
                },

                series: [
                    {
                        type: "pie",
                        center: ["36%", "50%"],
                        label: {
                            color: "rgba(255, 255, 255, 0.9)",
                            formatter: (val) => {
                                return val.name + "：" + val.value;
                            },
                        },
                        labelLine: {
                            show: true,
                            length: 8,
                            length2: 8,
                        },
                        data: this.data.map((item) => ({
                            value: item.value,
                            name: item.name,
                        })),
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                    },
                ],
            };
        },
    },
};
</script>

<style lang="scss" scoped>
.b-pie-box-risk {
    width: 100%;
    height: 100%;
}
</style>
